<template>
  <div>
  <el-breadcrumb style="padding-left:10px" separator="/">
  <!-- 设置面包屑 -->
  <el-breadcrumb-item v-for="(item,index) in $route.matched " :key="index" >
  <router-link :to='item.path || "/" '>{{item.meta.crumbs}}</router-link></el-breadcrumb-item>
</el-breadcrumb>
<!-- 表单数据提交 -->
<!-- <div class='formData'> -->
  <!-- 输入框 -->
 <!-- <span>标题 :</span> <el-input class='input' v-model="form.title" placeholder="请输入内容"></el-input> -->
<!-- </div> --> 
<el-form class='formData' ref="form" :model="form" label-width="80px">
  <el-form-item label="文章名称">
    <el-input class='input' v-model="form.title"></el-input>
  </el-form-item>
  <el-form-item label="文章内容">
     <VueEditor class='editor' v-model="form.content" :useCustomImageHandler='true' @image-added="handleImageAdded" />
  </el-form-item>
   <!-- 图片上传 -->
   <el-form-item label="图片上传">
     <el-upload  
  :action="$axios.defaults.baseURL + '/upload'"
  :headers="{
    Authorization:this.token
    }"
  :file-list="form.cover"	
  list-type="picture-card"
  :on-success	="handleUpload"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
   </el-form-item>
  <el-form-item label="文章栏目">
    <el-checkbox-group v-model="checkList">
      <el-checkbox :label="item.id" @change="choiceBox(item.id)" name="type" v-for="(item,index) in categorieList" :key="index">{{item.name}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="类型">
    <el-radio-group v-model="form.type" @change='radioChange'>
      <el-radio :label="1">文章</el-radio>
      <el-radio :label="2">视频</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="send">发表文章</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
// 引入富文本框
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      token: localStorage.getItem('token'),
      form: {
        // 文章标题
        title: '',
        // 文章内容
        content: '',
        // 文章图片
        cover: [],
        // 文章类型
        type: null,
        // 文章所属栏目
        categories: []
      },
      categorieList: [],
      checkList: []
    }
  },
  watch: {
    // 监听栏目选项
    // checkList(newList) {
    //   console.log(newList)
    // }
  },
  mounted() {
    this.loadCategories()
    // 判断页面如果有url地址就请求文章数据
    console.log(this.$route.query.id)

    if (this.$route.query.id) {
      this.getPost()
    }
  },
  methods: {
    radioChange(value) {
      // console.log(value)
      this.form.type = value
    },
    // 获取到栏目数据
    async loadCategories() {
      const res = await this.$axios({
        url: '/category',
        method: 'get'
      })
      const { data } = res.data
      this.categorieList = data.slice(1)
      // .then(res => {
      //   // console.log(res.data)
      //   // console.log(res.data.data.shift())
      //   // 结构数组 请求回来的栏目中我们并不需要关注这个栏目 所以要处理一下

      // })
    },
    handleRemove(file, fileList) {
      // console.log(file)
      // 如果发表的文章不需要组件里面的图片了 记得删除后替换掉form.cover里面的图片
      this.form.cover = fileList
    },
    handleUpload(res, file, fileList) {
      // console.log(res)
      // 将res.data.id赋值到file.id中 file是文件本身 res是上传成功回调函数
      file.id = res.data.id
      // 拼接图片服务器路径
      file.url = this.$axios.defaults.baseURL + res.data.url
      // 将当前图片存进form表单
      this.form.cover.push(file)
    },
    // 选项选择
    choiceBox(cateID) {
      this.form.categories = this.checkList.map(cateID => {
        return {
          id: cateID
        }
      })
    },
    // 文章发表
    async send() {
      const res = await this.$axios({
        url: '/post',
        method: 'post',
        data: this.form
      })
      const { message } = res.data
      if (message == '文章发布成功') {
        this.$message.success(message)
        setTimeout(() => {
          this.$router.push('/publish')
        }, 1500)
      }
      // .then(res => {
      //   // console.log(res.data)

      // })
    },
    // 富文本框文件上传处理
    // 该方法有四个参数 file 是当前上传的文件 editor为编辑器 将图片可以插入当前光标指定位置
    // cursorLocation为鼠标位置  resetUploader 是获取上传文件value值得函数 是一个函数 最后要调用
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      console.log(file)
      // 获取上传的文件 使用formdata进行初始化
      const formData = new FormData()
      formData.append('file', file)
      // 发起请求
      this.$axios({
        url: '/upload',
        method: 'post',
        data: formData
      }).then(res => {
        // console.log(res.data)
        // 获取图片路径
        const imgUrl = this.$axios.defaults.baseURL + res.data.data.url
        // 把上传的图片显示在鼠标的位置
        Editor.insertEmbed(cursorLocation, 'image', imgUrl)
        resetUploader()
      })
    },
    getPost() {
      const id = this.$route.query.id
      this.$axios({
        url: '/post/' + id,
        method: 'get'
      }).then(res => {
        console.log(res.data)
        const { data } = res.data
        // this.form.title = data.title
        // 将返回的数据改造成页面想要的格式
        // 将对象形式的分类栏目数组, 转换成数字形式的 checkList 数组
        // 栏目数据渲染
        this.checkList = data.categories.map(categers => {
          return categers.id
        })
        // console.log(this.checkList)
        // 文章类型渲染
        // this.form.type = data.type
        //将内容中的 div 标签改成 p
        this.form.content = data.content.replace(/div/g, 'p')
        // 文章图片的渲染
        // 将data里面的图片遍历 如果没有 基准路径就要添加
        const newCover = data.cover.map(img => {
          const newImg = { ...img }
          if (newImg.url.indexOf('http') == -1) {
            newImg.url = this.$axios.defaults.baseURL + newImg.url
          }
          return newImg
        })
        data.cover = newCover
        // 将表单数据覆盖 要不然点击修改之后页面不会显示出修改内容
        this.form = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.formData {
  margin-top: 20px;
  .input {
    width: 360px;
  }
  /deep/.editor {
    line-height: normal;
  }
}
</style>